<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>02-v-on的基本使用</title>
</head>
<body>
  <div id="app">
    <h1>vue的例子</h1>
    <p>{{msg}}</p>
    <!-- v-on是Vue中原始的注册事件的写法 -->
    <input type="button" value="按钮1" v-on:click="btnHandler">
    <!-- @是注册事件时的简写形式 在事件处理程序没有参数的时候 加不加小括号无所谓-->
    <input type="button" value="按钮2" @click="btnHandler()">
    <!-- 如果事件处理程序有形参，但是调用时没有小括号，则形参默认是事件对象 -->
    <input type="button" value="按钮3不带括号" @click="btnClick">
    <!-- 如果事件处理程序有形参，但是调用时加了小括号但不传参，则形参默认是undefined -->
    <input type="button" value="按钮4带括号不传参" @click="btnClick()">
    <!-- 如果事件处理程序有形参，但是调用时加了小括号并真正传参，则形参是传入的值 -->
    <input type="button" value="按钮5带括号并传参" @click="btnClick(10)">
    <br/>
    <input type="button" value="按钮6带参数并有事件对象" @click="eventHandler('abc',$event)">
  </div>
  <script src="../js/vue.js"></script>
  <script>
    Vue.config.productionTip = false; // 关闭生产提示
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      },
      methods:{
        // 对象是无序属性的集合或是键值对象的集合
        btnHandler(){
          console.log(123)
        },
        btnClick(a){
          console.log(a)
        },
        eventHandler(a,b){
          console.log(a,b)
        }
      }
    })

    /**
     * 小结：
     * 1. 当事件被触发，调用事件处理程序函数的时候，如果事件处理程序没有形参时，上面调用的事件处理程序加不加小括号都可以
     * 2. 事件处理程序有一个形参时：
     *    2.1 当调用时，没有小括号，则此时的形参是默认的事件对象
     *    2.2 当调用时，加了小括号但没传参，此时形参是undefined
     *    2.3 当调用时，加了小括号并传了一个真正的参数，此时形参是传入的值
     * 3. 当事件处理程序有两个参数，并想用到事件对象
     *    此时调用事件处理程序时，传入的第二个参数需要是$event
     * 
     * 
     * $event是Vue中事件处理程序中默认的一个值，相当于已经定义了，某些条件下可以直接使用
     * 
     **/ 
  </script>
</body>
</html>